<template>
    <div class="home">
        <div class="top-bar flex-al-center">
            <img src="@/assets/logo1.png" alt="">
            <div class="title">{{ title }}</div>
            <div class="login-out" @click="logOut">退出登录</div>
            
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            psw: "",
            userName: "",
            remember: false,
            selected: 0,
            navList: [
                "港区百科",
                "自然资源分布图",
                "港区自然资源禀赋特征查询",
                "基于自然资源禀赋的港区分类查询",
                "港区自然资源能源化评估",
                "能源组合策略评估",
            ]
        }
    },
    props:{
        "title":{
            type:String,
            default:"能源组合策略评估"
        }
    },
    watch: {
        $route: {
            handler(val, oldVal) {
                console.log(val)
                if (val.path.includes("wiki")) {
                    this.selected = 0
                } else if (val.path.includes("siteSelect")) {
                    this.selected = 1
                } else if (val.path.includes("naturalResQuery")) {
                    this.selected = 2
                } else if (val.path.includes("classifyQuery")) {
                    this.selected = 3
                } else if (val.path.includes("naturalResEstimate")) {
                    this.selected = 4
                } else if (val.path.includes("strategyEstimate")) {
                    this.selected = 5
                }
            },
            immediate: true
        }
    },
    created() {
    },
    methods: {
        logOut(){
            this.$store.commit("loginOut")
        },
    }
}
</script>

<style lang="scss" scoped>
.home-container {}

.top-bar {
    background: #2D57D2;
    padding: 20px 0 20px 20px;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 12;
    height: 9.3vh;

    // opacity: 1;
    .title {
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        font-size: 28px;
        font-weight: 500;
        color: #E9EBF1;
        line-height: 33px;
        
    }
}

.login-out {
    position: absolute;
    right: 30px;
    justify-content: center;
    font-size: 24px;
    padding: 8px;
    border-radius: 8px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    background-image: linear-gradient(#6182e5, #222222a4);
    cursor: pointer;
    text-align: center;
}
</style>
